<template>
  <div>
    <tabbar>
      <tabbar-item selected link="/main/home">
        <div slot="icon" class="my_icon my_icon_one"></div>
        <span slot="label" class="title">首页</span>
      </tabbar-item>
      <tabbar-item link="/main/rank">
        <img slot="icon" class="my_icon my_icon_two" src="static/bottom/21.png">
        <span slot="label" class="title">排行榜</span>
      </tabbar-item>
      <tabbar-item link="/main/focus">
        <img slot="icon" class="my_icon my_icon_three" src="static/bottom/31.png">
        <span slot="label" class="title">关注</span>
      </tabbar-item>
      <tabbar-item link="/main/myhome">
        <img slot="icon" class="my_icon my_icon_four" src="static/bottom/41.png">
        <span slot="label" class="title">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, Group, Cell } from "vux";

export default {
    components: {
        Tabbar,
        TabbarItem,
        Group,
        Cell
    },
    data() {
        return {};
    }
};
</script>
<style scoped>

.my_icon
{
  width:100%;
  height:100%;
  background: url(static/bottom/41.png);
}
.title {
    color: #555;
}

.weui-bar__item_on .weui-tabbar__label .title {
    color: #ff401a;
}
</style>
